<template>
	<view class="content">
		<!-- <view class="phoneModel_search">
			<text class="iconfont icon-sousuo"></text>
			<input placeholder-class="input_zi" placeholder="输入需要维修的手机型号" type="text" />
		</view> -->
		<view class="phoneModel_content">
			<view class="phoneModel_content_left">
				<view :class="curNav == index?'active nav_left_items':'nav_left_items'" v-for="(item,index) in navLeft" :key='index' @tap="navTap(index,item.id)">
					{{item.title}}
				</view>
			</view>
			<view class="phoneModel_content_right">
				<view class='navName'>
					<text class="name">{{navLeft[curNav].title}}</text>
					<text class="line"></text>
				</view>
				<view class="nav_right_items" v-for="(item,index) in list" @tap="obtainPhone(item)">
					<image :src="item.pic"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<toast></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				curNav:0,
				menu_id:'',
				navLeft:[
				]
			};
		},
		methods:{
			// 切换一级类目
			navTap(index,id){
 
				this.curNav = index
				this.get_server_data_lv2(id);
			},
			// 获取二级类目
			get_server_data_lv2(id){
				this.$ajax.post({
					url:'/Maintaintypecategory/getErjiProduct',
					data:{
						cid:id
					}
				}).then(res=>{
					if(res.code==200){
						this.list = res.data.data
					}else{
						this.$alert(res.msg)
					}
				})
			},
			//获取手机型号
			obtainPhone(item){
				console.log(item)
				try {
					uni.setStorageSync('Phone', item);
				} catch (e) {
					// error
				}
				uni.navigateBack({
					delta: 1
				})

			},
			init_server_data(){
				this.$ajax.post({
					url:'/Maintaintypecategory/maintainSubCategory',
					data:{
						cid:this.menu_id
					}
				}).then(res=>{
					console.log(res);
					if(res.code==200){
						this.navLeft = res.data.data;
						this.navTap(this.curNav,this.navLeft[this.curNav].id);
					}else{
						this.$alert(res.msg)
					}
				})
			}
		},
		onLoad(opt) {
			 
			 console.log("二级分类选择  onLoad " )
			 console.log(opt.id);
			 this.menu_id = opt.id;
			 this.init_server_data()
			 
			 
		}
	}
</script>

<style>
.content{
	box-sizing: border-box;
}
.phoneModel_search .iconfont{
	margin-right: 20upx;
	font-size: 30upx;
}
.phoneModel_search{
	background: #f7f7f7;
	border: 1px solid #dfe2ec;
	padding: 0 40upx;
	line-height: 55upx;
	box-sizing: border-box;
	display: flex;
	border-radius: 50upx;
	color: #b5b5b5;
	font-size: 24upx;
	margin: 20upx 5%;
	width: 90%;
}
.input_zi{
	color: #b5b5b5;
}
.phoneModel_content{
	display: flex;
}
.phoneModel_content_left .active{
	background: #ebedf5;
}
.nav_left_items{
	line-height: 120upx;
	height: 120upx;
	border-bottom: 1px solid #fff;
	text-align: center;
}
.phoneModel_content_left{
	background: #f7f7f7;
	color: #41434b;
	width: 200upx;
}
.nav_right_items{
	width: 29%;
	background: #f7f7f7;
	margin: 5upx 20upx 20upx 0;
	text-align: center;
	float: left;
}
.nav_right_items image{
	height: 96upx;
	width: 63upx;
	display: block;
	margin: 20upx auto 0;
}
.nav_right_items text{
	line-height: 70upx;
	font-size: 24upx;
}
.phoneModel_content_right{
	flex: 1;
	padding-left: 20upx;
	box-sizing: border-box;
}
.navName{
	line-height:100upx;
	text-align:center;
	position:relative;
	height:100upx;
	width:100%;
}
.navName .line{
	height:4upx;
	width:327upx;
	background:#9f9f9f;
	display:block;
	margin:0 80upx;
	position:absolute;
	top:49upx;
	display:block;
	margin:0 80upx;
}
.navName .name{
	position:absolute;
	top:-2px;
	background:#fff;
	padding:0 50upx;
	z-index:1;
	left:32%;

}
</style>
